import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Card, Row, Col, Button, Modal } from 'antd';
import { axios,covertUrlParams } from 'utils';
import styles from './BaseInfo.less';
import '../../config';
class BaseInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            imgSrc:''
        };
    }

    componentDidMount() {
        console.log("props---",this.props);
        const {info: { userId }} = this.props;
        axios({
            url: '/hs/admin/userDetails/findUserContactDetail',
            method: 'post',
            data: {
                pageNum:1,
                pageSize:20,
                userId:userId
            }
        }).then((a) =>{
            if( a.code == 200 ) {
                Constants.Contacts = a.data;
                console.log("$this.tableData--",Constants);
            }

        })
    }

    handleClick = () => {
        const {  history, location: { pathname } } = this.props;
        history.push(`${pathname}?option=operatorInfo`);
    }
    handleCancel =() => {
        this.setState({ visible: false });
    }
    handleImgPreview = (src) => {
        this.setState({
            visible: true,
            imgSrc: src
        });
    }

    render() {
        const { info } = this.props;
        return (
            <div>
                <div className={styles.cardWrapper}>
                    <Card type={'inner'} title={'业务信息'}>
                        <Row gutter={24}>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>订单编号：</span><span>{info.orderNumber || ''}</span></Col>
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>用户ID：</span><span>{info.userId || ''}</span></Col>*/}
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请时间：</span><span>{info.applicationTime || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>正常还款金额(元)：</span><span>{info.applicationMoney || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请期限(天)：</span><span>{info.applicationDays || ''}</span></Col>
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>服务费：</span><span>{info.serviceMoney || ''}</span></Col>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>借款状态：</span><span>{info.loanOption || ''}</span></Col>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>审核员：</span><span>{info.checkPerson || ''}</span></Col>*/}
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请金额：</span><span>{info.hasGiveMoney || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>利息：</span><span>{'无'}</span></Col>
                        </Row>
                    </Card>
                </div>

                <div className={styles.cardWrapper}>
                    <Card type={'inner'} title={'个人信息'}>
                        <Row gutter={24}>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>客户姓名：</span><span>{info.customerName || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>手机号：</span><span>{info.iphoneNumber || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>身份证号：</span><span>{info.idCard || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>身份证地址：</span><span>{info.address || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>出生年月：</span><span>{info.birthday || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>生肖：</span><span>{info.zodiac || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>设备型号：</span><span>{info.deviceName || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>设备内存：</span><span>{info.deviceMemory || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>渠道：</span><span>{info.source || ''}</span></Col>
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>可借金额(元)：</span><span>{info.canLoanMoney || ''}</span></Col>*/}
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>卡号：</span><span>{info.cardNumber || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>开户银行：</span><span>{info.bank || ''}</span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>预留手机号：</span><span>{info.bankIphoneNumber || ''}</span></Col>

                        </Row>
                    </Card>
                </div>

                {/*<div className={styles.cardWrapper}>*/}
                    {/*<Card type={'inner'} title={'银行卡信息'}>*/}
                        {/*<Row gutter={24}>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>种类：</span><span>{info.bankCardType || ''}</span></Col>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>开户银行：</span><span>{info.bank || ''}</span></Col>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>卡号：</span><span>{info.cardNumber || ''}</span></Col>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>预留手机号：</span><span>{info.bankIphoneNumber || ''}</span></Col>*/}
                            {/*<Col className={styles.col} lg={12} xl={8}><span className={styles.title}>添加时间：</span><span>{info.addTime || ''}</span></Col>*/}
                        {/*</Row>*/}
                    {/*</Card>*/}
                {/*</div>*/}

                <div className={styles.cardWrapper}>
                    <Card type={'inner'} title={'客户资料'}>
                        <Row gutter={24}>
                            <Col className={styles.col} lg={12} xl={8}>
                                <div className={styles.idCardImg} onClick={() => this.handleImgPreview(info.idCardFront)}><img className={styles.userPic} src={info.idCardFront} /></div>
                                <div className={styles.picTitle}>身份证正面</div>
                            </Col>
                            <Col className={styles.col} lg={12} xl={8}>
                                <div className={styles.idCardImg} onClick={() => this.handleImgPreview(info.idCardBack)}><img className={styles.userPic} src={info.idCardBack} /></div>
                                <div className={styles.picTitle}>身份证反面</div>
                            </Col>
                            <Col className={styles.col} lg={12} xl={8}>
                                <div className={styles.idCardImg} onClick={() => this.handleImgPreview(info.frontPic)}><img className={styles.userPic} src={info.frontPic} /></div>
                                <div className={styles.picTitle}>大头照</div>
                            </Col>
                        </Row>

                    </Card>
                </div>
                <div className={styles.cardWrapper}>
                    <Card>
                        <Row gutter={24}>
                            <Col className={styles.col} span={6}><span className={styles.title}>同盾分数：</span><span>{info.score}</span></Col>
                            <Col className={styles.col} span={6}><span className={styles.title}>人脸识别相似值：</span><span>{info.similarity || ''}</span></Col>
                            <Col className={styles.col} span={6}><span className={styles.title}>芝麻分：</span><span>{info.zhimafen || ''}</span></Col>
                            <Col className={styles.col} span={6}><span className={styles.title}>指迷分数：</span><span>{info.zmScore}</span></Col>
                        </Row>
                    </Card>

                </div>
                <div className={`${styles.cardWrapper} ${styles.bottomBtn}`}>
                    <Button type={'primary'} onClick={this.handleClick}>下一步</Button>
                </div>

                <Modal
                    onCancel={this.handleCancel}
                    width={600}
                    visible={this.state.visible}
                    footer={null}
                    title={'查看图片'}>
                        <div className={styles.imageWrapper}>
                            <img width={'100%'} alt={'idCard'} src={this.state.imgSrc}/>
                        </div>
                </Modal>

            </div>
        );

    }
}
BaseInfo.propTypes = {
    info: PropTypes.object,
};
BaseInfo.defaultProps = {
    info: {
        // orderNumber: '123456789',
        // userId: '123424',
        // productName: 'hello',
        // applicationMoney: '123',
        // applicationTime: '2018-04-03 18:29:23',
        // applicationDays: '7',
        // serviceMoney: '1.00',
        // loanOption: '复审中',
        // checkPerson: '张xx',
        // hasGiveMoney: '3.00',
        // device_memory: '0',
        //
        // customerName: '李四',
        // iphoneNumber:'12345678966',
        // idCard: '123123456956621235',
        // iphoneType: 'iphone 6',
        // canLoanMoney: '600',
        // email: 'adad@163.com',
        // source: 'app',
        // address: '浙江省杭州市xxxxxx',
        //
        // bankCardType: '储蓄卡',
        // bank: '工商银行',
        // cardNumber: '1234649614131',
        // bankIphoneNumber: '12345678963',
        // addTime: '2018-04-03 18:29:23',
        //
        // idCardFront:'http://f2.topitme.com/2/b9/71/112660598401871b92l.jpg',
        // idCardBack:'http://f2.topitme.com/2/b9/71/112660598401871b92l.jpg',
        // frontPic: 'http://f2.topitme.com/2/b9/71/112660598401871b92l.jpg',
        // score: '50',
        // riskLevel:'高风险'
    }
}

export default withRouter(BaseInfo);
